<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
    <head>
        <title>Interactive Image Vamp up with jQuery, CSS3 and PHP</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Interactive Image Vamp up with jQuery, CSS3 and PHP" />
        <meta name="keywords" content="jquery, php, fancy, css3, rotation" />
        <link type="text/css" href="/css/image-editor/style.css" rel="stylesheet" />
        <link type="text/css" href="/css/ecard/template.css" rel="stylesheet" />
        <link href="/css/ecard/jquery-ui.css" type="text/css" rel="stylesheet"/>
        <script type="text/javascript" src="/js/jquery.min_1.5.2.js"></script>
        <script type="text/javascript" src="js/ecard/jquery-ui.js"></script>
        <script type="text/javascript" src="/js/json2.js"></script>
        <script type="text/javascript" src="/js/ecard/jquery.transform.js"></script>
        <script type="text/javascript" src="/js/ecard/jquery.transformable-v.3.js"></script>
        <script type="text/javascript" src="/js/upclick.js"></script>
        <script type="text/javascript" src="/js/ecard/mColorPicker.js"></script>
        <script type="text/javascript" src="/js/ecard/FontPicker.js"></script>
        <script type="text/javascript" src="/js/slide/jquery.carouFredSel-5.1.3-packed.js"></script>
    </head>
    <body>
        <div id="content">
            <div class="left tool_bar">
                <div class="container_block">
                    <div class="title">Hình nền
                        <div class="pagination-top">
                            <a id='tpl_next' class="next right next-btn" href="javascript:void(0);" onclick=""></a>
                            <a id='tpl_prev' class="prev left previous-btn" href="javascript:void(0);" onclick=""></a>

                        </div>
                    </div>
                    <div class="block_list">
                        <ul  id="template_scroll">
                            <?php
                            $arrElements = $objImage->loadElements("1/thumb");
                            foreach ($arrElements as $key => $value) {
                                echo '<li class="template_item" ><img id="' . $value['name'] . '"  src="' . $value['src'] . '" /></li>';
                            }
                            ?>
                        </ul>
                    </div>
                </div>
                <div class="container_block">
                    <div class="title">Hoa văn
                        <div class="pagination-top">
                            <a id='pattern_next' class="next right next-btn" href="javascript:void(0);" onclick=""></a>
                            <a id='pattern_prev' class="prev left previous-btn" href="javascript:void(0);" onclick=""></a>

                        </div>
                    </div>
                    <div class="block_list">
                        <ul  id="pattern_scroll">
                            <?php
                            $arrElements = $objImage->loadElements("1/thumb");
                            foreach ($arrElements as $key => $value) {
                                echo '<li class="pattern_item" ><img id="' . $value['name'] . '"  src="' . $value['src'] . '" /></li>';
                            }
                            ?>
                        </ul>
                    </div>
                </div>
                <!--                <div id="objects">
               
                                </div>-->
                <div id="tools">

                    <div id="tabs">
                        <ul>
                            <li><a href="#tabs-1"><i class="icon_i_layer"></i>Chèn Ảnh</a></li>
                            <li><a href="#tabs-2"><i class="icon_i_text"></i>Chèn Chữ</a></li>
                        </ul>
                        <div id="tabs-1">
                            <div class="layer_list">
                                <div class="layer" rel='obj_0' id="layer_bg"><img src="uploads/ecard/template/1/01.png" />Hình nền</div>
                            </div>
                        </div>
                        <div id="tabs-2">
                            <div id="text_control"> 
                                <div class="text_input left">
                                    <div class="col_left">Nhập chữ:</div>
                                    <div class="col_right">
                                        <textarea id="txtText"></textarea>
                                    </div>                    
                                </div>
                                <div class="font-family left">
                                    <div class="col_left">Font chữ:</div>
                                    <div id="sbHolder" class="sbHolder col_right">
                                        <span id="sbToggle" href="#" class="sbToggle"></span>
                                        <span id="sbSelector" href="#" class="sbSelector" rel="wedding_kt">Wedding KT</span>
                                    </div>                    
                                </div>
                                <div class="font-size left">
                                    <div class="col_left" >Cỡ chữ:</div>
                                    <div class="col_right">
                                        <div class="left" id="fontSize" rel="25"></div>
                                        <input class="left" id="color_pick" type="color" value="#FFFFFF" data-text="hidden" />
                                    </div>
                                </div>
                            </div>
                            <div class="layer_list"></div>
                        </div>
                        <div id="tabs-3">
                            <div class="layer_list"></div>
                        </div>
                    </div>

                </div>
            </div>
            <div id="background" class="template_01" >
                <img class="background obj_item" id="obj_0" src="uploads/ecard/template/1/01.png" />
                <div class="item_layer" id="item_layer_01"></div>
                <div class="item_layer" id="item_layer_02"></div>
                <div class="item_layer" id="item_layer_03"></div>
                <div class="text ui-wrapper item_layer" id="objtext_01">
                    <div class="text_dis"></div>
                </div>
            </div>
            <a id="submit"><span></span></a>
            <a id="upImage">upload</a>
            <form id="jsonform" action="merge.php" method="POST">
                <input id="jsondata" name="jsondata" type="hidden" value="" autocomplete="off"></input>
            </form>
        </div>
        <script src="/js/ecard/ecard.js" type="text/javascript"></script>
    </body>
</html>